<template>
  <div class="login">
    <div class="content">
      <div class="head">
        <span>登录</span>
      </div>
      <div class="item">
        <van-form ref="form">
          <van-field
            v-model="form.mobile"
            name="mobile"
            :rules="rules.mobile"
            placeholder="请输入手机号"
          >
            <template #left-icon>
              <span class="iconfont">&#xe60b;</span>
            </template>
          </van-field>
          <van-field
            v-model="form.code"
            :rules="rules.code"
            placeholder="请输入验证码"
          >
            <template #left-icon>
              <span class="iconfont">&#xe60c;</span>
            </template>
            <template #button>
              <span class="code" @click="codeClick">获取验证码</span>
            </template>
          </van-field>
        </van-form>
        <van-button block round color="#7db3f4" class="button" @click="submit"
          >登录</van-button
        >
        <div class="loading" @click="$router.push('/home/first')">稍后登录</div>
        <div class="clause">隐私条款</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Authorizations } from '@/api/login.js'
import { setLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'onChange' },
          {
            validator: value => {
              return /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.test(
                value
              )
            },
            message: '请输入正确手机号',
            trigger: 'onChange'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'onChange' }]
      }
    }
  },
  methods: {
    codeClick () {
      this.$refs.form
        .validate('mobile')
        .then(() => {
          this.$toast.success('246810')
        })
        .catch(() => {})
    },
    submit () {
      this.$refs.form
        .validate()
        .then(async () => {
          this.$toast.loading({ duration: 0 })
          const res = await Authorizations(this.form)
          setLocal('token', res.data.token)
          this.$store.commit('setIsLogin', true)
          this.$toast.success('登录成功')
          if (this.$route.query.redirect) {
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/home/first')
          }
        })
        .catch(() => {})
    }
  },
  created(){
    // document.title = this.$route.meta.title
  }
}
</script>
<style lang="less" scoped>
.login {
  position: relative;
  height: 100%;
  background: url('~@/assets/timge.7f8d5c98.gif') no-repeat;
  background-size: cover;
  .iconfont {
    margin-right: 5px;
  }
  .content {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 80px;
    background-color: #fff;
    opacity: 0.9;
    border-radius: 10px;
    padding: 30px 15px 0;
    .head{
      text-align: center;
      padding-bottom: 25px;
    }
    .iconfont {
      font-size: 0.42667rem;
      color: #000;
    }
    .loading {
      text-align: center;
      font-size: 16px;
      color: #666;
      padding: 20px;
    }
    .clause {
      text-align: right;
      font-size: 16px;
      color: #738ad7;
      padding-bottom: 10px;
    }
    .button {
      margin-top: 15px;
    }
  }
}
</style>
